<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/paint-friend.css">
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/iconfontandME.css" />
		<style type="text/css">
			body{
				background: #f6f9fa;
			}
			.nav>li>a{
				    padding: 4px 5px;
			}
			header{
				background: white;
				height: 50px;
			}
			#ul{
				 margin-top: 13px;
			}
			#ul>li>a{
				color: black;
				font-size:10px ;
			}
			.span{
				    margin: -8px;
				    background: white;
				    margin-top: -4px;
			}
			#span{
				color: #5BC0DE;
			}
			.nav>li>a:hover{
				background: white;
			}
			#sc{
				width: 200%;
				background: #f4f4f4;
			}
			#button{
				margin-left: 147px;

			}
			#button>span{
				color: #999;
			}
			#login{
				margin-top: 6px;
			}
			#img{
				margin-top: 9px;
			}
			#li{
				width: 68px;
				height: 57px;
				margin-top: -16px;
				margin-left: 13px;
				background: #f45a8d;
				border-radius: 5px;
			}
			#a{
				text-align: center;
				margin-top: 17px;
				background: #f45a8d;
			}
			.sc2{
				width: 300px;
				margin-left: -17px;
				height: 40px;
			}
			.button2{
				margin-left: -17px;
				margin-top: 30px;
				width: 300px;
				background: #33b4de;
				color: white;
				height: 40px;
			}
			#ren{
				border: 1px solid #e1e2e5;
				width: 150px;
				height: 51px;
				text-align: center;
				line-height: 46px;
				background: #fafafa;
				border-bottom: none;
				border-right: none;
			}
			#xin{
				float: left;
				width: 4px;
				height: 16px;
				margin-top: 17px;
				background-color: #00a1d6;
				border-radius: 4px;
			}
			#dul{
				width: 151px;
			    margin-left: 5px;
			    margin-top: -1px;
			    border: 1px solid #e1e2e5;
			    background: #fafafa;
			}
			#dul>ul>li>a:hover{
				background-color: #71717154;
			}
			#gao{
				line-height:39px;
			}
			#text{
				margin-left: 7px;
    			font-size: 14px;
    			color: black;
			}
			.iconfont{
				margin-left: 26px;
				 color: #b1b1b1;
			}
			#wb{
				height: 54px;
			    padding-left: 38px;
			    line-height: 54px;
			    color: #7a7a7a;
			    font-size: 16px;
			    display: block;
			    box-sizing: border-box;
			    border-top: 1px solid #e4e9f0;
			    border-bottom: 1px solid #e4e9f0;
			    text-decoration: none;
			}
			#wb>i{
				font-size: 10px;
			    margin-left: 22px;
			    color: #7a7a7a;
			}
			.l{
				bottom: 807px;
			}
			#lei{
				width: 817px;
				height: 807px;
				margin-left: -41px;
				border: 1px solid #e4e9f0;
				border-left: none;
				border-top: none;
			}
			#ni{
				top: 20px;
				right: 89px;
			}
			#ni_color{
				color: #aaa;
			}
			#hu{
				right:73px;
				color: #898989;
				font-size: 14px;
			}
			#qian{
				top: 13px;
				right: 63px;
			}
			#textarea{
				height: 88px;
			}
			#fb{
				width: 110px;
			    height: 36px;
			    line-height: 1;
			    color: white;
			    background-color: #00a1d6;
			}
		</style>
	</head>
	<div>
		<header>
			<div class="container">
				<!--前-->
				<ul class="nav nav-pills navbar-nav" id="ul">
					<li class="span"><a href="new_file.html">
						<span class="iconfont icon-bilibilidonghua"></span>
					</a></li>
				    <li><a href="#">主站</a></li>
				    <li><a href="#">游戏中心</a></li>
				    <li><a href="#">直播</a></li>
				    <li><a href="#">会员购</a></li>
				    <li><a href="#">漫画</a></li>
				    <li><a href="#">赛事</a></li>
				    <li><a href="#">BML</a></li>
				    <li><a href="#">
				    	<span id="span" class="glyphicon glyphicon-phone"></span>
				    	下载APP</a></li>

				  </ul>

				 <!-- 搜索框-->
				  <form class="navbar-form  navbar-left" action="" method="post">
					<div class="form-group">
					<input type="text" id="sc" class="form-control" placeholder="请输入要找的类容"/>
					</div>
					<div class="form-group">
						<button id="button" class="btn btn-link" style="outline: none;border: none;">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</div>
				</form>

				<!--后-->
				<div class="nav navbar-nav navbar-left" id="img">
					<a href="#">
						<img src="img/akari.jpg" style="height: 32px;"/>
					</a>
				</div>
				<ul class="nav navbar-nav navbar-left" id="ul">
					 <li><a href="#">动态</a></li>
				    <li><a href="#">历史</a></li>
				    <li><a href="#">常做中心</a></li>
				    <li id="li">
				    	<a href="#" id="a" style="color: white;">投稿</a>
				    </li>
				</ul>
				<!---->
			</div>
		</header>
		<!---->
		<div style="margin-top: -5px;">
			<div style="height: 90px;background: #00a0d8;">
			<div class="container">
				<img src="img/rl_top.35edfde.png"/>
			</div>
			</div>
			<div style="height:1023px;background: white;">
				<!--整体内容-->
				<div class="container">
					<div style="margin-left: 20px;margin-top: 30px;">
						<div class="row">
							<div class="col-md-2" id="ren">
								<span style="font-size: 16px;color: #99a2aa;">个人中心</span>
							</div>
							<div class="col-md-8" style="border: 1px solid #e1e2e5;height: 51px;width: 71%;">
								<span id="xin"></span>
								<span style="margin-left: 5px;line-height: 50px;color: #00a1d6;">我的信息</span>
							</div>
						</div>
					</div>
				</div>
			<div id="app">
				<!--导航栏和内容-->
				<div class="container">
					<div class="row">
						<div class="col-md-2">
						<div id="dul">
						<ul class="nav" >
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe65e;</i>
											<!---->
											<span id="text">
											首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xec03;</i>
											<!---->
											<span id="text">
											大&nbsp;&nbsp;会&nbsp;&nbsp;员
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe709;</i>
											<!---->
											<span id="text">
											会员积分
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe608;</i>
											<!---->
											<span  id="text">
											我的信息
											</span>
										</a>
									</li>
									<li id="gao" style="background-color: #00a1d7;">
										<a href="#" >
											<!--小图标-->
											<i class="iconfont">&#xe62e;</i>
											<!---->
											<span id="text" style="color: white;">
											我的头像
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe6db;</i>
											<!---->
											<span id="text">
											我的勋章
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#" >
											<!--小图标-->
											<i class="iconfont">&#xe648;</i>
											<!---->
											<span id="text">
											账号安全
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe70b;</i>
											<!---->
											<span id="text">
											黑名单管理
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe613;</i>
											<!---->
											<span id="text">
											我的硬币
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe6a1;</i>
											<!---->
											<span id="text">
											我的记录
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe660;</i>
											<!---->
											<span id="text">
											实名认证
											</span>
										</a>
									</li>
									<li id="gao">
										<a href="#">
											<!--小图标-->
											<i class="iconfont">&#xe603;</i>
											<!---->
											<span id="text">
											邀请注册
											</span>
										</a>
									</li>
								</ul>
								<!--底部导航-->
								<a href="#" id="wb">个人空间<i class="glyphicon glyphicon-menu-right"></i></a>
								<a href="#" id="wb">我的钱包<i class="glyphicon glyphicon-menu-right"></i></a>
								<a href="#" id="wb">创作中心<i class="glyphicon glyphicon-menu-right"></i></a>
								<a href="#" id="wb">直播中心<i class="glyphicon glyphicon-menu-right"></i></a>
								<!---->
								</div>
						</div>
						<!--内容-->
						<div class="col-md-9 col-md-offset-2 l">
							<div id="lei">
								<!--用户信息修改-->
								<form action="" method="post">
									<!--昵称-->
									<div class="row" style="line-height: 72px;">
										<div class="col-md-2 col-md-offset-1">
											<span>昵称:</span>
										</div>
										<div class="col-md-4" id="ni">
											<input v-model="nickname" type="text" name="" value="" class="form-control"/>
										</div>
										<div class="col-md-4 col-md-pull-1">
											<p id="ni_color">注：修改一次昵称需要消耗6个硬币</p>
										</div>
									</div>
									<!---->

									<!--用户名-->
									<div class="row" style="line-height: 39px;">
										<div class="col-md-2" style="margin-left: 56px;">
											<span>用户名:</span>
										</div>
										<div class="col-md-4" id="hu">
											<span id="nickname">张世纪超低无敌大沙雕！！！！</span>
										</div>
									</div>
									<!---->

									<!--我的签名-->
									<div class="row" style="line-height: 60px;">
										<div class="col-md-2" style="margin-left: 44px;">
											<span>我的签名:</span>
										</div>
										<div class="col-md-9" id="qian">
											<textarea v-model="desc" type="" name="" value="" class="form-control" id="textarea" placeholder="设置您的签名- ( ゜- ゜)つロ"></textarea>
										</div>
									</div>
									<!---->

									<!--性别-->
									<div class="row" style="line-height: 60px;margin-left: 55px;margin-top: 29px;">
										<div class="col-md-2">
											<span>性别:</span>
										</div>
										<div class="col-md-4" style="margin-left: -73px;margin-top: 2px;">
											<input type="radio" name="gender" value="男"/>
											<span>男</span>
											<span style="margin-left: 20px;"></span>
											<input type="radio" name="gender" value="女"/>
											<span>女</span>
											<span style="margin-left: 20px;"></span>
											<input type="radio" name="gender" value="保密"/>
											<span>保密</span>
										</div>
									</div>
									<!---->

									<!--出生日期-->
									<div class="row" style="line-height: 60px;">
										<div class="col-md-2" style="margin-left: 44px;">
											<span>出生日期:</span>
										</div>
										<div class="col-md-9" id="qian">
											<input v-model="birthday" type="" name="" value="" class="form-control" placeholder="请输入日期" style="width: 238px;"/>
										</div>
									</div>
									<!---->

									<!--下滑线-->
									<hr style="width: 92%;margin-top: 60px;"/>
									<!---->

									<!--保存按钮-->
									<div class="text-center">
									<button @click="UpdateUser()" type="button" class="btn" id="fb">保存</button>
									</div>
									<!---->

								</form>
								<!---->
							</div>
						</div>
						<!---->

					</div>
				</div>
				</div>
					<!---->

				<!---->
					<!---->
				</div>
			</div>
		</div>

		<footer style="position: absolute;">
		<div class="foot_top clearfix">
			<div class="bilibili">
				<p>bilibili</p>
				<div class="about clearfix">
					<ul>
						<li><a href="###">关于我们</a></li>
						<li><a href="###">联系我们</a></li>
					</ul>
					<ul>
						<li><a href="###">友情链接</a></li>
						<li><a href="###">加入我们</a></li>
					</ul>
					<ul>
						<li><a href="###">哔哩哔哩周边</a></li>
						<li><a href="###">官方认证</a></li>
					</ul>
				</div>
			</div>
			<div class="fast_link">
				<p>传送门</p>
				<div class="about clearfix">
					<ul>
						<li><a href="###">帮助中心</a></li>
						<li><a href="###">侵权申诉</a></li>
						<li><a href="###">用户反馈论坛</a></li>
					</ul>
					<ul>
						<li><a href="###">高级弹幕</a></li>
						<li><a href="###">分院帽计划</a></li>
						<li><a href="###">壁纸站</a></li>
					</ul>
					<ul>
						<li><a href="###">活动专题页</a></li>
						<li><a href="###">活动中心</a></li>
						<li><a href="###">名人堂</a></li>
					</ul>
				</div>
			</div>
			<div class="focus clearfix">
				<a href="###">
					<dl>
						<dt class="focus_pic phone"></dt>
						<dt class="code_pic phone_code"></dt>
						<dd class="focus_pro">手机端下载 </dd>
					</dl>
				</a>
				<a href="###">
					<dl>
						<dt class="focus_pic sina"></dt>
						<dt class="code_pic sina_code"></dt>
						<dd class="focus_pro">新浪微博</dd>
					</dl>
				</a>
				<a href="###">
					<dl>
						<dt class="focus_pic official"></dt>
						<dt class="code_pic wechat_code"></dt>
						<dd class="focus_pro">官方微信</dd>
					</dl>
				</a>
			</div>
		</div>
		<div class="foot_bottom clearfix">
			<div class="cooper"><img src="img/index/cooper.png" alt=""></div>
			<div class="foot_info">
				<p>广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文[2013]0480-056号 | 信息网络传播视听节目许可证：0910417 | 互联网ICP备案：沪ICP备13002172号-3 沪ICP证：沪B2-20100043 | 违法不良信息举报邮箱：help@bilibili.com | 违法不良信息举报电话：4000233233转3</p>
				<p>网上有害信息举报专区： <a href="###">中国互联网违法和不良信息举报中心</a> |  <a href="###">上海互联网举报中心</a> | <a href="###">12318 全国文化市场举报网站</a></p>
			</div>
		</div>
	</footer>
</body>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/iconfont.js" ></script>
	<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
	<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
</html>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            nickname:"",
			desc:"",
			birthday:"",
            userdata: JSON.parse(sessionStorage.getItem("user"))
        }, methods: {
            getUser: function () {
                if (this.userdata.user.nickname != null) {
                    if(this.nickname!=null && this.nickname!=''){
                        var name = window.document.getElementById("nickname");
                        name.innerHTML = this.nickname;
					}else{
                        var name = window.document.getElementById("nickname");
                        name.innerHTML = this.userdata.user.nickname;
					}

                }
            },
			UpdateUser: function () {
                var userId = JSON.parse(sessionStorage.getItem("user")).user.id;
                alert(userId)
				alert(this.nickname),
				alert(this.desc),
				alert(this.birthday)
                axios.get("http://localhost:8080/updateUser", {
                    params: {
                        id:userId,
                        nickname:this.nickname,
                        birthday:this.birthday,
                    }
                }).then(res => {
                    var name = window.document.getElementById("nickname");
                    name.innerHTML = this.nickname;
                });
            },
        }, mounted() {
            this.getUser();
        }
    });
</script>